<template>
    <div class="clock" :style="{width: width,height: height,background:background,color: color}">
        <div>
            <span id="sid">
            {{ value }} <span style="font-size: 25px">{{ unit }}</span>
        </span>
        </div>
        <div>{{ title }}</div>
    </div>
</template>

<script>

/**
 * 默认
 */
export default {
    props: {
        value: {
            type: String,
            default: '123.456'
        },
        title: {
            type: String,
            default: '标题'
        },
        unit: {
            type: String,
            default: '单位'
        },
        min: {
            type: String,
            default: '0'
        },
        max: {
            type: String,
            default: '100'
        },
        width: {
            type: String,
            default: '280px'
        },
        height: {
            type: String,
            default: '280px'
        },
        // 背景颜色
        background: {
            type: String,
            default: '#B0E0E6'
        },
        // 字体颜色
        color: {
            type: String,
            default: '#292421'
        }
    },
    data() {
        return {}
    },
    mounted() {

    }
}
</script>

<style>
.clock {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: bold;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    margin: 20px auto;
}
</style>
